<template>
	<view>
		<view class="areapopup">
			<view class="Information-wrap">
				<view class="Information-wrap-tabbar">
					<scroll-view scroll-y="true">
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='全国'}" @click="diquchange('全国')">全国</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='华东'}" @click="diquchange('华东')">华东</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='华北'}" @click="diquchange('华北')">华北</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='东北'}" @click="diquchange('东北')">东北</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='华南'}" @click="diquchange('华南')">华南</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='西北'}" @click="diquchange('西北')">西北</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='西南'}" @click="diquchange('西南')">西南</view>
						<view class="tabbar-item" :class="{tabbar_current:currentquyu=='华中'}" @click="diquchange('华中')">华中</view>
					</scroll-view>
				</view>
				<view class="Information-wrap-tabtext">
					<scroll-view scroll-y="true">
						<evan-checkbox-group :max="31" @change="onDiquChange" v-model="newsdiqu">
							<view @click="toggleCheckbox3(index)" class="Information-tabtext-item" v-for="(area,index) in arealist" :key="area.value">
								<text class="evan-checkbox-show__list-item__label">{{area.title}}</text>
								<evan-checkbox ref="listCheckbox3" :preventClick="true" :label="area.value" key="checkbox-diqu"></evan-checkbox>
							</view>
						</evan-checkbox-group>
					</scroll-view>
				</view>
			</view>
			<view class="information-btn">
				<view class="btn-confirm" @click="queren('diqu')">确认</view>
			</view>
		</view>

	</view>
</template>

<script>
	import EvanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue'
	import EvanCheckboxGroup from "@/components/evan-checkbox/evan-checkbox-group.vue"
	var checkeddiqu = '';
	export default {
		components: {
			EvanCheckbox,
			EvanCheckboxGroup
		},
		data() {
			return {
				newsdiqu: [],
				choosediqu: '',
				currentquyu: '全国',
				area: [{
					"全国": {
						"val": 0,
						"items": [{
							value: '全国',
							title: '全国',
							code: ''
						}]
					},
					"华东": {
						"val": 1,
						"items": [{
							value: '上海',
							title: '上海',
							code: '310000'
						}, {
							value: '江苏',
							title: '江苏',
							code: '320000'
						}, {
							value: '浙江',
							title: '浙江',
							code: '330000'
						}, {
							value: '安徽',
							title: '安徽',
							code: '340000'
						}, {
							value: '福建',
							title: '福建',
							code: '350000'
						}, {
							value: '江西',
							title: '江西',
							code: '360000'
						}, {
							value: '山东',
							title: '山东',
							code: '370000'
						}, {
							value: '台湾',
							title: '台湾',
							code: '710000'
						}]
					},
					"华北": {
						"val": 2,
						"items": [{
							value: '北京',
							title: '北京',
							code: '110000'
						}, {
							value: '天津',
							title: '天津',
							code: '120000'
						}, {
							value: '河北',
							title: '河北',
							code: '130000'
						}, {
							value: '山西',
							title: '山西',
							code: '140000'
						}, {
							value: '内蒙古',
							title: '内蒙古',
							code: '150000'
						}]
					},
					"东北": {
						"val": 3,
						"items": [{
							value: '辽宁',
							title: '辽宁',
							code: '210000'
						}, {
							value: '吉林',
							title: '吉林',
							code: '220000'
						}, {
							value: '黑龙江',
							title: '黑龙江',
							code: '230000'
						}]
					},
					"华南": {
						"val": 4,
						"items": [{
							value: '广东',
							title: '广东',
							code: '440000'
						}, {
							value: '广西',
							title: '广西',
							code: '450000'
						}, {
							value: '海南',
							title: '海南',
							code: '460000'
						}, {
							value: '香港',
							title: '香港',
							code: '810000'
						}, {
							value: '澳门',
							title: '澳门',
							code: '820000'
						}]
					},
					"西北": {
						"val": 5,
						"items": [{
							value: '陕西',
							title: '陕西',
							code: '610000'
						}, {
							value: '甘肃',
							title: '甘肃',
							code: '620000'
						}, {
							value: '青海',
							title: '青海',
							code: '630000'
						}, {
							value: '宁夏',
							title: '宁夏',
							code: '640000'
						}, {
							value: '新疆',
							title: '新疆',
							code: '650000'
						}]

					},
					"西南": {
						"val": 6,
						"items": [{
							value: '重庆',
							title: '重庆',
							code: '500000'
						}, {
							value: '四川',
							title: '四川',
							code: '510000'
						}, {
							value: '贵州',
							title: '贵州',
							code: '520000'
						}, {
							value: '云南',
							title: '云南',
							code: '530000'
						}, {
							value: '西藏',
							title: '西藏',
							code: '540000'
						}, ]

					},
					"华中": {
						"val": 7,
						"items": [{
								value: '河南',
								title: '河南',
								code: '410000'
							},
							{
								value: '湖北',
								title: '湖北',
								code: '420000'
							},
							{
								value: '湖南',
								title: '湖南',
								code: '430000'
							}
						]
					},
				}],
				arealist: [{
					value: '全国',
					title: '全国',
					code: ''
				}]

			};
		},
		onLoad(options) {
			var choosed = JSON.parse(options.diqu); // 字符串转对象;
			console.log(choosed);
			this.newsdiqu = choosed;
		},
		methods: {
			//切换地区
			diquchange(e) {
				this.currentquyu = e;
				this.arealist = this.area[0][e].items;
			},
			onDiquChange(evt) { //所选地区
				if (evt[evt.length - 1] == '全国') {
					this.newsdiqu = ['全国'];
				}
				if (this.newsdiqu.length > 1) {
					if (this.isInArray(this.newsdiqu, "全国")) {
						this.newsdiqu = this.newsdiqu.filter(item => {
							return item != '全国';
						})
					}
				}
			},
			queren(type) {
				if (type == "diqu") {
					if (this.newsdiqu.length <= 0) {
						uni.showToast({
							title: "请选择购买地区",
							icon: "none"
						})
					} else {
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						prevPage.AreaList = this.newsdiqu;
						uni.navigateBack();
					}

				}
			},
			isInArray(arr, value) {
				for (var i = 0; i < arr.length; i++) {
					if (value === arr[i]) {
						return true;
					}
				}
				return false;
			},
			toggleCheckbox3(index) {
				this.$refs.listCheckbox3[index].toggle()
			}
		}

	}
</script>

<style lang="scss">
	@import "@/static/css/custom/choose.scss";

	.areapopup {
		margin-top: 20rpx;
	}
</style>
